<template>
	<view class="share_box">
		<image style="width: 100%;height: 1200rpx;" :src="$fun.imgUrl('webimage/share_bg.png')" mode=""></image>
		<view class="share_ercode">
			<view class="title">
				邀请1位好友奖励红包 
			</view>
			<view class="ercode" @click="$fun.jump(`/pageA/shareErCode?shareLink=${shareLink}`)">
				<image src="/static/ercode.png" mode=""></image>
				<text>面对面扫码</text>
			</view>
			<view class="share_linkT">
				我的专属推荐下载链接
			</view>
			<view class="share_link">
				<text>{{shareLink}}</text>
				<text @click="copy(shareLink)">复制</text>
			</view>
			<view style="height: 30rpx;">
				
			</view>
		</view>
		<view style="height: 300rpx;">
			
		</view>
		<view class="share_teamimg">
			<image class="share_teamimg" src="/static/share_img.png" mode=""></image>
			<view class="share_team">
				<view class="team_item">
					<view style="height: 50rpx;">
						
					</view>
					<text class="num">{{shareInfo.invite}} <text>人</text></text>
					<view class="text">
						我发出的邀请
					</view>
				</view>
				<view class="team_item">
					<view style="height: 50rpx;">
						
					</view>
					<text class="num">{{shareInfo.income}} <text>元</text></text>
					<view class="text">
						累计收益
					</view>
				</view>
				<view class="team_item">
					<view style="height: 50rpx;">
						
					</view>
					<text class="num">{{shareInfo.invites}} <text>人</text></text>
					<view class="text">
						成功邀请
					</view>
				</view>
			</view>
		</view>

		<view style="height: 350rpx;">
			
		</view>
		<view class="html_box">
			<view class="title">
				活动规则
			</view>
			<view class="text" v-html="shareInfo.info">
				
			</view>
		</view>
	</view>
</template>
<script>
	import uqrcode from"@/pageA/components/Sansnn-uQRCode/components/uqrcode/uqrcode.vue"
	import uniCopy from '@/components/xb-copy/uni-copy.js'
	export default {	
		components:{
			uqrcode
		},
		data() {
			return {
				shareLink:'',
				shareInfo:{}
			};
		},
		// 分享好友
		onShareAppMessage() {
			return {
			      title: '鲸算网云',
			      path: JSON.parse(uni.getStorageSync('gitH5Qrcode')), 
			    }
		},
		// 分享朋友圈
		onShareTimeline(){
			return {
			      title: '鲸算网云',
			      query: JSON.parse(uni.getStorageSync('gitH5Qrcode')), 
			    }
		},
		onLoad() {
			this.$fun.ajax.post('user/gitH5Qrcode', {}).then(res => {
				if (res.code == 1) {
					this.shareLink = res.data
				}
			})
			this.$fun.ajax.post('user/inviteInfo', {}).then(res => {
				if (res.code == 1) {
					this.shareInfo = res.data
				}
			})
		},
		methods: {
			copy(text) {
				uniCopy({
					content: text,
					success: (res) => {
						uni.showToast({
							title: res,
							icon: 'none'
						})
					},
					error: (e) => {
						uni.showToast({
							title: e,
							icon: 'none',
							duration: 3000,
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: #FF2B49;
	}
	.share_box{
		position: relative;
		.share_ercode{
			width: 660rpx;
			padding: 44rpx 33rpx;
			background: #FFFFFF;
			box-shadow: 2rpx 4rpx 4rpx 0rpx rgba(208, 19, 22, 0.3);
			border-radius: 20rpx;
			position: absolute;
			top: 1000rpx;
			left: 0;
			right: 0;
			margin: auto;
			box-sizing: border-box;
			.title{
				text-align: center;
				color: #ED2A2D;
				font-size: 30rpx;
			}
			.ercode{
				margin: 30rpx auto;
				width: 400rpx;
				height: 80rpx;
				background: #FFE3E6;
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				image{
					width: 40rpx;
					height: 40rpx;
				}
				text{
					margin-left: 20rpx;
					font-size: 26rpx;
					color: #333333;
				}
			}
			.share_linkT{
				font-size: 22rpx;
				font-family: Microsoft YaHei;
				color: #ED2A2D;
				text-align: center;
				margin-bottom: 27rpx;
			}
			.share_link{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 30rpx;
				width: 100%;
				height: 80rpx;
				background: #FFE3E6;
				border-radius: 10rpx;
				text:nth-child(1){
					font-size: 22rpx;
					font-family: Microsoft YaHei;
					color: #333333;
					width: 400rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				text:nth-child(2){
					font-size: 22rpx;
					font-family: Microsoft YaHei;
					color: #ED2A2D;
				}
			}			
		}
		.share_teamimg{
			position: relative;
			image{
				width: 345rpx;
				height: 80rpx;
				z-index: 101;
			}
			text-align: center;
			.share_team{
				width: 660rpx;
				padding: 40rpx;
				padding-bottom: 60rpx;
				box-sizing: border-box;
				background: #FFFFFF;
				box-shadow: 2rpx 4rpx 4rpx 0rpx rgba(208, 19, 22, 0.3);
				border-radius: 20rpx;
				position: absolute;
				top: 40rpx;
				z-index: 100;
				left: 0;
				right: 0;
				margin: auto;
				display: flex;
				display: flex;
				justify-content: space-between;
				.team_item{
					margin-top: 40rpx;
					width: 178rpx;
					height: 212rpx;
					background: #FFE9EC;
					border-radius: 10rpx;
					text-align: center;
					.num{
						font-size: 72rpx;
						color: #FF2B49;
						font-weight: bold;
						text{
							font-weight: normal;
							font-size: 30rpx;
						}
					}
					.text{
						font-size: 24rpx;
						font-family: Adobe Heiti Std;
						font-weight: normal;
						color: #666666;
						text-align: center;
					}
				}
			}
		}
		
	}
	.html_box{
		padding-bottom: 80rpx;
		// text-align: center;
		.title{
			font-size: 36rpx;
			font-family: SourceHanSansCN;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
		}
		.text{
			width: 558rpx;
			font-size: 26rpx;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			color: #FFFFFF;
			margin: 0 auto;
			margin-top: 10rpx;
		}
	}
</style>
